<template>
  <div>
    <!-- 导航 -->
    <nav-text><span slot="navText">当前位置: 数据中心 > 数据查询 > 试剂查询</span></nav-text>
    <!-- 搜索内容 -->
    <div class="searchBox">
      <div>
        <div>
          <textBox>
            <span slot="titleName">仪器ID:</span>
            <input
              v-model="IDs"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入仪器ID"
            />
          </textBox>
        </div>
        <div>
          <selectBox>
            <span slot="titleName">仪器类型:</span>
            <el-select
              slot="selectBox"
              v-model="Types"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in insTypeOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </selectBox>
        </div>
      </div>
      <div>
        <div>
          <textBox>
            <span slot="titleName">试剂批号:</span>
            <input
              v-model="BatchNums"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入试剂批号"
            />
          </textBox>
        </div>
        <div>
          <textBox>
            <span slot="titleName">试剂名称:</span>
            <input
              v-model="Names"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入试剂名称"
            />
          </textBox>
        </div>
      </div>
      <div>
        <div>
          <textBox>
            <span slot="titleName">医院:</span>
            <input
              @input="hospitalQuest"
              v-model="Hospitals"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入医院"
            />
          </textBox>
          <!-- 医院查询框组件 -->
          <hospital-quest-box
            v-if="isShowHospitalBox"
            class="hospital-box"
          >
          <span class="deleteIcon" slot="deleteIcon" @click.stop="isShowHospitalBox=false">×</span>
            <span
              slot="spanBox"
              v-if="isNallData"
            >无数据</span>
            <li
              slot="liList"
              @click.stop="selectedHospital(index)"
              v-for="(item,index) in hospitalList"
              :key="index"
            >{{item.dNameCode}}</li>
          </hospital-quest-box>
        </div>
        <div>
          <textBox>
            <span slot="titleName">负责人:</span>
            <input
              v-model="Principals"
              class="textBoxSize"
              type="text"
              slot="textBox"
              placeholder="请输入负责人"
            />
          </textBox>
        </div>
      </div>
      <div>
        <div class="btnBox">
          <search-button>
            <el-button
              @click="reagentDataList('1')"
              slot="searchBtn"
              type="success"
            >查 询</el-button>
          </search-button>
          <download-button>
            <el-button
              slot="dounloadBtn"
              type="primary"
              icon='el-icon-upload2'
              circle
            ></el-button>
          </download-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="40"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="eCode"
          label="仪 器 I D"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="reagentName"
          label="试 剂 名 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="reagentLot"
          label="试 剂 批 号"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="仪 器 名 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="type"
          label="仪 器 类 型"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="totalCount"
          label="消 耗 量"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dName"
          label="医 院"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="cName"
          label="负 责 人"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
        @current-change="reagentDataList"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pagesTotal"
        :page-size="pagesSize"
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
  </div>
</template>

<script>
import hospitalQuestBox from "@/components/DataCenter/BaseForm/hospitalQuestBox";
import { hospitalQuest } from "@/request/api.js";
import { reagentDataList } from "@/request/api.js";
import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import pagination from "@/components/baseCpn/pagination.vue";
import "@/assets/base/dataCenterTableStyle.css";

export default {
  data() {
    return {
      isNallData: false,
      isShowHospitalBox: false,
      hospitalList: [],
      HospitalsCode: "",
      highlight: true,
      fit: true,
      pagesTotal: null,
      pagesSize: 8,
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem"
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem"
      },
      insTypeOption: [],
      tableData: [],
      //搜素条件属性
      IDs: "",
      Types: "",
      BatchNums: "",
      Names: "",
      Hospitals: "",
      Principals: ""
    };
  },
  components: {
    pagination,
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    hospitalQuestBox
  },
  mounted() {
    this.reagentDataList(this.$page);
    this.insTypeOption = localStorage.getItem("instrumentList").split(",");
  },
  methods: {
    //表格数据接口
    reagentDataList(pages) {
      reagentDataList({
        page: pages,
        pageSize: this.$pageSize,
        eCode:this.IDs,
        reagentLot:this.BatchNums,
        dCode:this.Hospitals,
        eType:this.Types,
        reagentName:this.Names,
        fullName:this.Principals,
      })
        .then(res => {
          console.log("表格数据接口成功", res);
          this.pagesTotal = res.data.total;
          if (res.data.success) {
            this.tableData = res.data.rows;
            for (var i = 0; i < res.data.rows.length; i++) {
              this.tableData[i].dataId = (pages - 1) * 8 + 1 + i; //js对象中，想在对象中添加一个新属性，直接用这（对象.属性）即可
            }
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("表格数据接口请求失败", err);
        });
    },
    selectedHospital(index) {
      this.Hospitals = this.hospitalList[index].dNameCode;
      this.HospitalsCode = this.hospitalList[index].aCode;
      this.isShowHospitalBox = false;
    },
    hospitalQuest() {
      this.isShowHospitalBox = true;
      hospitalQuest({
        name: this.Hospitals,
        page: "1",
        pageSize: "1000"
      })
        .then(res => {
          if (res.data.success) {
            this.isNallData = false;
            this.hospitalList = res.data.rows;
          } else {
            this.isNallData = true;
            this.hospitalList[0].dNameCode = "无数据";
          }
          this.hospitalList = res.data.rows;
        })
        .catch(err => {
          this.$message.error({
            message: res.data.errorMsg
          });
        });
    },

    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },
  }
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 16rem;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .hospital-box {
      position: absolute;
      right: 0;
      top: 7rem;
    }
    .btnBox {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }
    div {
      flex: 1;
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
}
</style>